<template>
  <div>
    <h1>{{ currentUser.name }}</h1>
    <p>
      <a :href="loginHref">Click here to manually login again.</a>
    </p>
    <dl>
      <dt>Current Backend Environment:</dt>
      <dd>{{ currentUser.env }}</dd>
      <dt>Username:</dt>
      <dd>{{ currentUser.username }}</dd>
      <dt>Teams ({{ numTeams }}):</dt>
      <dd>
        <ul v-for="(entry, index) in currentUser.teams" v-bind:key="index">
          <li>{{ entry.name }}</li>
        </ul>
      </dd>
    </dl>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Profile",
  computed: {
    ...mapGetters(["api", "mode", "currentUser"]),
    numTeams: function() {
      return this.currentUser.teams ? this.currentUser.teams.length : 0;
    },
    loginHref: function() {
      return this.api.login;
    }
  }
};
</script>

<style scoped>
dd {
  padding: 0 0 10px 10px;
}
</style>
